import React,{useState} from "react";
//函数组件的第一次渲染和每一次更新，都是把函数重新执行（产生新的闭包）
/* 
  函数组件中修改状态和方法和类组件中的setState类似
  执行机制(react18)：建立更新队列，实现批处理（修改状态和方法是异步操作的）
 */
export default function Usestate(){
  console.log('render');//第一次渲染更新,点击按钮执行一次
  let [num,setNum] = useState(10),
      [Y,setY] = useState([10,20]);
  const handler =()=>{
    setNum(num+1);
    Y.push(30);
    // setY(Y);//0x000
    setY([...Y]);//0x001
    //若想立即清空队列刷新,则用flushSync(()=>{setY(Y+2)})
  }
  return(
    <div>
      <span>{num}</span><span>{Y}</span>
      <button onClick={handler}>新增</button>
    </div>
  )
}